<template>
  <div class="common-layout">
    <el-container>
      <el-aside style="width: 280px;">
        <el-menu active-text-color="#ffd04b" background-color="#000000" class="el-menu-vertical-demo" default-active="2"
          style="height: 100vh;" text-color="#fff" @open="handleOpen" @close="handleClose" router>
          <el-menu-item index="">
            <el-icon style="font-size: 30px;">
              <School />
            </el-icon>
            <span style="color: #fff;font-size: 20px;">智慧会议管理平台</span>
          </el-menu-item>
          <el-menu-item index="">
            <el-icon>
              <HomeFilled />
            </el-icon>
            <el-menu-item index="IndexShow">首页</el-menu-item>
          </el-menu-item>
          <el-menu-item index="/MeetingManage">
            <el-icon>
              <OfficeBuilding />
            </el-icon>
            <span>会议室管理</span>
          </el-menu-item>
          <el-menu-item index="/MeetReservation">
            <el-icon>
              <Calendar />
            </el-icon>
            <span>会议预约</span>
          </el-menu-item>
          <el-menu-item index="/MeetingApproval">
            <el-icon>
              <Document />
            </el-icon>
            <span>会议审批</span>
          </el-menu-item>
          <el-menu-item index="">
            <el-icon>
              <DocumentCopy />
            </el-icon>
            <span>统计分析</span>
          </el-menu-item>
          <el-sub-menu index="">
            <template #title>
              <el-icon>
                <Setting />
              </el-icon>
              <span>系统管理</span>
            </template>
            <el-menu-item index="">用户管理</el-menu-item>
            <el-menu-item index="">角色权限</el-menu-item>
            <el-menu-item index="/Department">部门管理</el-menu-item>
            <el-menu-item index="">操作日志</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>


      <el-main style="background-color: palegreen;">
        <el-button v-if="drawer" @click="drawerValue">
          <el-icon style="font-size: 30px;">
            <Expand />
          </el-icon>
        </el-button>
        <el-button v-else @click="drawerValue2">
          <el-icon style="font-size: 30px;">
            <Fold />
          </el-icon>
        </el-button>



        <RouterView />
      </el-main>
    </el-container>
  </div>
</template>
<script lang="ts" setup>
import {
  Expand,
  Fold,
  Document,
  Setting,
  OfficeBuilding,
  School,
  Calendar,
  DocumentCopy,
  HomeFilled,
} from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import type { DrawerProps } from 'element-plus'

//抽屉
const drawer = ref(false)
const drawerValue = () => {
  drawer.value = false
}
const drawerValue2 = () => {
  drawer.value = true
}

const direction = ref<DrawerProps['direction']>('rtl')


const router = useRouter()


const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>
